import styles from '@/pages/main/index.less';
import Block from '@/pages/main/components/Block';
import { useEffect, useRef } from 'react';
import echarts from 'echarts';
import 'echarts-liquidfill/src/liquidFill';
import { getColor } from '@/utils';
import { Carousel } from 'antd';

const scaleBase = window.scaleBase;

const CenterRightBottom = props => {
  const { data } = props;
  const inChart = useRef();
  const outChart = useRef();

  const renderLiquidChart = (chart, data, color = '#26C7F6') => {
    const option = {
      series: [{
        type: 'liquidFill',
        itemStyle: {
          shadowBlur: 0,
          color: getColor(color, 1),
          opacity: 0.7,
        },
        label: {
          color: '#fff',
          fontSize: 16 * scaleBase,
        },
        backgroundStyle: {
          color: getColor(color, 0.1),
        },
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 3 * scaleBase,
            borderColor: color,
            shadowBlur: 30 * scaleBase,
            shadowColor: color
          }
        },
        radius: '75%',
        period: 2000,
        waveLength: '60%',
        animationDuration: 1000,
        data: [data.done / data.total]
      }]
    }
    chart.setOption(option);
  }

  const renderChart = () => {
    const { inDone, inTotal, outDone, outTotal } = data;

    renderLiquidChart(outChart.current, {done: outDone, total: outTotal}, '#2CFDFF');
    renderLiquidChart(inChart.current, {done: inDone, total: inTotal}, '#0BFEA5');
  }
  const renderCarousel = () => {
    const { announcement } = data;
    const { name, row, col, layer, count } =  announcement;

    return <Carousel
      autoplay
      autoplaySpeed={5000}
      speed={8000}
      pauseOnHover={false}
      dots={false}
    >
      <div className={styles.announcement}>
        <div>
          <em>{name}</em> 入库 <em>{count}</em> 件，位置:<em>{layer}</em> 层 <em>{row}</em> 排 <em>{col}</em> 列
        </div>
      </div>
      <div className={styles.announcement}>
        <div>
          <em>{name}</em> 入库 <em>{count}</em> 件，位置:<em>{layer}</em> 层 <em>{row}</em> 排 <em>{col}</em> 列
        </div>
      </div>
    </Carousel>

  }

  const renderBody = () => {
    return <div className={styles.centerRightBottomWrapper}>
      <div className={styles.centerRightBottomChartWrapper}>
        <div>
          <h2>出库情况</h2>
          <div className={styles.centerRightBottomChart}>
            <div id={'center-right-bottom-out-chart'} className={styles.chart}/>
            <div className={styles.centerRightBottomInfoWrapper}>
              <div className={styles.centerRightBottomInfoItem}>
                <div>
                  <h4>{data?.outDone}</h4>
                  <h3>已出库数</h3>
                </div>
                <div>
                  <h4>{data?.outTotal}</h4>
                  <h3>总出库数</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <h2>入库情况</h2>
          <div className={styles.centerRightBottomChart}>
            <div id={'center-right-bottom-in-chart'} className={styles.chart}/>
            <div className={styles.centerRightBottomInfoWrapper}>
              <div className={styles.centerRightBottomInfoItem}>
                <div>
                  <h4>{data?.inDone}</h4>
                  <h3>已入库数</h3>
                </div>
                <div>
                  <h4>{data?.inTotal}</h4>
                  <h3>总入库数</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.centerRightBottomCarouselWrapper}>
        {data?.announcement && renderCarousel()}
      </div>
    </div>
  }
  useEffect(()=> {
    inChart.current = echarts.init(document.getElementById('center-right-bottom-in-chart'));
    outChart.current = echarts.init(document.getElementById('center-right-bottom-out-chart'));
  }, []);

  useEffect(()=> {
    data && renderChart();
  });
  return <Block
    containerClassName={styles.bottom}
    title={'叉车调度情况'}
    body={renderBody()}
  />
}

export default CenterRightBottom;
